<template>
  <div class="Login">
    <div class="login-header">
      <router-link to="/homePage">
        <img src="../../assets/images/logo.png" alt="">
      </router-link>
      <div class="login-line"></div>
      <p class="login-text">无损检测智能平台</p>
    </div>
    <div class="login-wrapper">
      <YsRow>
        <YsCol span="8" offset='8'>
          <YsForm ref="registerDom" :model="enterDeptInfo" :rules="ruleValidate" :label-width="120">
            <YsFormItem label="账号：" prop="user_account">
              <YsInput size="large" v-model="enterDeptInfo.user_account"></YsInput>
            </YsFormItem>
            <YsFormItem label="密码：" prop="user_password">
              <YsInput size="large" type="password" v-model="enterDeptInfo.user_password"></YsInput>
            </YsFormItem>
            <YsFormItem label="用户名：" prop="user_cn_name">
              <YsInput size="large" v-model="enterDeptInfo.user_cn_name"></YsInput>
            </YsFormItem>
            <YsFormItem label="公司名称：" prop="dept_full_cname">
              <YsInput size="large" v-model="enterDeptInfo.dept_full_cname"></YsInput>
            </YsFormItem>
            <YsFormItem label="联系电话：" prop="dept_contcat">
              <YsInput size="large" v-model="enterDeptInfo.dept_contcat"></YsInput>
            </YsFormItem>
            <YsFormItem label="地址：" prop="dept_address">
              <YsInput size="large" v-model="enterDeptInfo.dept_address"></YsInput>
            </YsFormItem>
            <YsFormItem label="邮箱地址：" prop="dept_email">
              <YsInput size="large" v-model="enterDeptInfo.dept_email"></YsInput>
            </YsFormItem>
            <YsFormItem prop="enter_type">
              <YsRadioGroup class="xingxing" v-model="enterDeptInfo.enter_type">
                <YsRadio :label="1">检测机构</YsRadio>
                <YsRadio :label="2">装备厂商</YsRadio>
              </YsRadioGroup>
            </YsFormItem>
            <YsFormItem style=" text-align: right;">
              <YsButton type="primary" @click="addTenantUser('registerDom')">注册</YsButton>
              <YsButton style="margin-left:10px" @click="refresh" type="primary">重置</YsButton>
            </YsFormItem>
          </YsForm>
        </YsCol>
      </YsRow>

    </div>

    <div class="login-footer">
      <!-- <p>2018北京远舢智能科技有限公司 I 京公网安备 11010502036687号</p> -->
      <p>中国特种设备检测研究院</p>
    </div>

  </div>
</template>
<script>

import { ys_SysAction } from 'ys-utils-js'
import { mapGetters, mapActions } from "vuex";


var checkPhone = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('负责人手机号不可为空'));
  } else {
    if (value !== '') {
      var reg = /^1[3456789]\d{9}$/;
      if (!reg.test(value)) {
        callback(new Error('请输入有效的手机号码'));
      }
    }
    callback();
  }
}
export default {
  name: 'YsLoginTest',

  data() {
    return {
      enterDeptInfo: {
        user_cn_name: "",
        dept_full_cname: "",
        user_password: "",
        user_account: "",
        dept_address: "",
        dept_contcat: "",
        dept_email: ""
      },
      ruleValidate: {
        user_account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        user_cn_name: [
          { required: true, message: '用户名', trigger: 'blur' }
        ],
        user_password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        dept_full_cname: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        dept_contcat: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' }
        ],
        dept_address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        enter_type: [
          { required: true, message: '请输入', type: 'number', trigger: 'change' }
        ],
        dept_email: [
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],

      },
    };
  },
  methods: {
    ...mapActions(['addUserEnter']),
    //校验手机号

    //获取服务列表
    addTenantUser(name) {
      let _this = this
      _this.$refs[name].validate((valid) => {
        if (valid) {
          _this.addUserEnter({ enterDeptInfo: this.enterDeptInfo }).then(res => {
            let { data, msg, scode, status } = res;
            if (status === 'ok') {
              _this.$YsMessage.success({
                duration: 6,
                closable: true,
                content: data.message_text,
              });
              _this.$router.push('login')
            }
          }).catch(err => {
            _this.page.tableLoad = false
            _this.$YsMessage.error('新增失败');
          })
        }
      })
    },
    //重置
    refresh() {
      this.$refs.registerDom.resetFields()
      this.enterDeptInfo = this.$options.data().enterDeptInfo
    }
  },
};
</script>
<style lang="less" scoped>
.Login {
  width: 100%;
  height: 100%;
  // background: #ffffff;
  position: relative;

  .login-wrapper {
    width: 100%;
    height: calc(100% - 88px);
  }
  .login-header {
    width: 100%;
    height: 88px;
    background: #ffffff;
    display: flex;
    align-items: center;
    img {
      margin-left: 28px;
      margin-top: 6px;
    }
    .login-line {
      width: 1px;
      height: 32px;
      border: 1px solid #919bad;
      margin: 0 20px;
    }
    .login-text {
      width: 245px;
      height: 37px;
      font-size: 26px;
      font-family: PingFangSC-Semibold;
      line-height: 37px;
      color: #656665;
    }
  }
  .login-footer {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    p {
      font-size: 14px;
      font-family: PingFangSC-Regular;
      line-height: 20px;
      color: #405680;
    }
  }
}
.xingxing {
  &:before {
    content: "*";
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 14px;
    color: #d53939;
  }
}
</style>
